<script setup lang="ts">
import {queryTeacherExamArrange} from "/@/api/hbmy_wx/examArrange";
import {Toast} from "vant";
import {useRouter} from "vue-router";
const activeName = ref([])
const roomList = ref([])
const currentDate = ref(new Date())
const show = ref(false);
const datePick1Show = ref(false);
const datePick2Show = ref(false);
const datePick3Show = ref(false);
const date = ref()
const startTime = ref('08:00')
const endTime = ref('21:00')
const formattedDate = computed(() => {
  if (!date.value) {
    date.value = new Date();
  }
  const dateObject = new Date(date.value);
  const year = dateObject.getFullYear();
  const month = (dateObject.getMonth() + 1).toString().padStart(2, '0');
  const day = dateObject.getDate().toString().padStart(2, '0');
  return `${year}-${month}-${day}`;
});

const search = () => {
  show.value = true;
}
async function changeSelect() {
  datePick1Show.value = false,
  datePick2Show.value = false,
  datePick3Show.value = false
  const data = {
    date: formattedDate.value,
    startTime: startTime.value,
    endTime: endTime.value,
  }
  const res = await queryTeacherExamArrange(data)
  const error = res.response.value.extend.error
  if (error === '暂无监考任务') {
    show.value = false
    roomList.value=[]
    Toast('无监考任务')
    return
  } else {
    roomList.value = JSON.parse(res.response.value.extend.rooms)
    show.value = false
  }
}

onMounted(() => {
  changeSelect();
})

const router = useRouter();
// const store = useStore();

const toBack = (event) => {
  event.stopPropagation(); // 阻止事件冒泡
  router.back();
}

const reload = (event) => {
  event.stopPropagation(); // 阻止事件冒泡
  window.location.reload();
}
</script>

<template>
  <van-sticky>
    <Header title="监考查询"/>
  </van-sticky>

    <van-form style="margin-top: 2vw;" @submit="">
      <van-cell-group inset>
        <van-field
            v-model="formattedDate"
            is-link
            readonly
            name="picker"
            label="考试日期"
            placeholder="点击选择考试日期"
            @click="datePick1Show = true"
        />
        <van-field
            v-model="startTime"
            is-link
            readonly
            name="picker"
            label="考试开始时段"
            placeholder="点击选择考试开始时段"
            @click="datePick2Show = true"
        />
        <van-field
            v-model="endTime"
            is-link
            readonly
            name="picker"
            label="考试结束时段"
            placeholder="点击选择考试结束时段"
            @click="datePick3Show = true"
        />
      </van-cell-group>
    </van-form>

    <van-popup v-model:show="datePick1Show" position="bottom" round>
      <van-datetime-picker
          v-model="date"
          type="date"
          title="选择考试日期"
          @confirm="changeSelect"
          @cancel="datePick1Show = false"
      />
    </van-popup>
    <van-popup v-model:show="datePick2Show" position="bottom" round>
      <van-datetime-picker
          v-model="startTime"
          type="time"
          title="选择考试开始时段"
          :min-hour="8"
          :max-hour="21"
          @confirm="changeSelect"
          @cancel="datePick2Show = false"
      />
    </van-popup>
    <van-popup v-model:show="datePick3Show" position="bottom" round>
      <van-datetime-picker
          v-model="endTime"
          type="time"
          title="选择考试结束时段"
          :min-hour="8"
          :max-hour="21"
          @confirm="changeSelect"
          @cancel="datePick3Show = false"
      />
    </van-popup>

  <van-collapse v-model="activeName" ref="collapseRef">
    <van-collapse-item
        style="margin-top:15px; padding:0 15px;"
        v-for="room in roomList"
        :name="room.num"
        :is-link="false"
        :readonly="true"
        size="large">
      <template #title>
        <span style="height:100%;line-height: 3vh; border-left: 5px solid #1989fa; margin-right: 5px"></span>
        {{room.courseName}}
      </template>
      <template #label>
        <p>{{ room.testTime }}</p>
      </template>
      <template #value>
        <div style="margin-top: 13px">
          {{room.roomName}}
        </div>
      </template>
    </van-collapse-item>
  </van-collapse>

  <van-empty v-if="roomList.length===0" image="search"  description="暂无监考任务" />

</template>

<style scoped lang="less">
.header {
  background-color: #fff;
  height: 90px;
  display: flex;
  font-size: 35px;
  justify-content: center;
  align-items: center;
  margin-bottom: 5px;
  color: #141414;

  .icon {
    position: absolute;
    left: 30px;
  }

  .icon-shua {
    position: absolute;
    right: 30px;
    color: #fff;
  }

  .icon-search {
    position: absolute;
    right: 100px;
    color: #fff;
  }

  .van-cell:after {
    position: relative;
  }
}

/deep/.van-field__label {
  width: 30vw;
  white-space: nowrap;
}

</style>
